import React from 'react';
import _ from 'lodash';
import { HANZI, HanziData } from './Data';
import { DragHanziContext } from './DragContex';

type HanziListItemProps = {
  c: string;
  onDragStart?: (context: DragHanziContext) => void;
};

type HanziListItemState = {
  isDragging: boolean;
};

class HanziListItem extends React.Component<HanziListItemProps, HanziListItemState> {
  constructor(props: HanziListItemProps) {
    super(props);
    this.state = {
      isDragging: false,
    };
  }

  onDragStart = (context: DragHanziContext) => {
    const { onDragStart } = this.props;
    if (onDragStart) {
      onDragStart(context);
    }
  };

  render() {
    const { c } = this.props;
    const { isDragging } = this.state;
    return (
      <div
        key={c}
        style={{
          width: 50,
          height: 50,
          display: 'inline-flex',
          justifyContent: 'center',
          alignItems: 'center',
          border: '1px solid gray',
          borderRadius: 5,
          margin: 2,
          fontSize: 24,
          cursor: isDragging ? 'grabbing' : 'grab',
        }}
        draggable
        onDragStart={(e) => {
          this.setState({ isDragging: true });
          this.onDragStart({ type: 'HANZI', c });
        }}
        onDragEnd={(e) => {
          this.setState({ isDragging: false });
        }}
      >
        {c}
      </div>
    );
  }
}

type HanziListSeacrchProps = {
  onSearch?: (text: string) => void;
};

type HanziListSeacrchState = {
  text: string;
};

class HanziListSeacrch extends React.Component<HanziListSeacrchProps, HanziListSeacrchState> {
  constructor(props: HanziListSeacrchProps) {
    super(props);
    this.state = {
      text: '',
    };
  }

  handleSearch = (text: string) => {
    const { onSearch } = this.props;
    if (onSearch) {
      onSearch(text);
    }
  };

  render() {
    const { text } = this.state;
    return (
      <input
        style={{ width: '100%', padding: '4px 8px', fontSize: 16 }}
        value={text}
        onChange={(e) => this.setState({ text: e.target.value }, () => this.handleSearch(this.state.text))}
      />
    );
  }
}

type HanziListProps = {
  onDragStart?: (context: DragHanziContext) => void;
};

type HanziListState = {
  showHanziList: HanziData[];
};

export default class HanziList extends React.Component<HanziListProps, HanziListState> {
  constructor(props: HanziListProps) {
    super(props);
    this.state = {
      showHanziList: HANZI,
    };
  }

  handleDragStart = (context: DragHanziContext) => {
    const { onDragStart } = this.props;
    if (onDragStart) {
      onDragStart(context);
    }
  };

  handleSearch = (text: string) => {
    // TODO: debounce
    this.setState({
      showHanziList: _(HANZI)
        .filter((it) => it.spy.findIndex((py) => py.startsWith(text)) >= 0)
        .take(30)
        .value(),
    });
  };

  render() {
    const { showHanziList } = this.state;
    return (
      <div style={{ width: 168, padding: 2, border: '1px solid red', backgroundColor: 'azure' }}>
        <HanziListSeacrch onSearch={this.handleSearch} />
        {showHanziList.map((hanzi) => (
          <HanziListItem
            key={hanzi.c}
            c={hanzi.c}
            onDragStart={(e) => this.handleDragStart({ type: 'HANZI', c: hanzi.c })}
          />
        ))}
      </div>
    );
  }
}
